<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>CSS计算器</title>
		<style>
			body {
				/* 初始化一个计数器 */
				counter-reset: colorCounter 0;
			}
			.container {
				width: 600px;
				background-color: #fff;
				padding: 40px 60px;
			}
			dl dt {
				color: #333;
				font-size: 40px;
				padding-bottom: 30px;
			}
			dl dd {
				display: flex;
				flex-wrap: wrap;
			}
			.item {
				padding: 10px 20px;
				margin-right: 30px;
				margin-bottom: 20px;
				position: relative;
				border: 2px solid transparent;
				border-radius: 30px;
				background-color: #ddd;
			}
			.item input {
				width: 100%;
				height: 60px;
				position: absolute;
				opacity: 0;
				cursor: pointer;
			}
			.item:has(input:checked) {
				background-color: rgba(30, 144, 255, .2);
				color: dodgerblue;
				border: 2px solid dodgerblue;
			}
			.item input:checked {
				/* 计数器进行累加 */
				counter-increment: colorCounter;
			}
			p {
				font-size: 30px;
				color: #333;
				margin-top: 30px;
				margin-bottom: 30px;
			}
			p span::before {
				/* 使用计数器 */
				content: counter(colorCounter);
				color: red;
				font-weight: bold;
				padding: 0 10px;
			}
		</style>
	</head>
	<body>
		<div class="container">
			<dl>
				<dt>颜色</dt>
				<dd>
					<div class="item">
						<input type="checkbox" name="colors"/ checked>
						<div class="btn">白色</div>
					</div>
					<div class="item">
						<input type="checkbox" name="colors"/ checked>
						<div class="btn">白色</div>
					</div>
					<div class="item">
						<input type="checkbox" name="colors"/ checked>
						<div class="btn">白色</div>
					</div>
					<div class="item">
						<input type="checkbox" name="colors"/ checked>
						<div class="btn">白色</div>
					</div>
				</dd>
			</dl>
			<p>你一共选择<span></span>种颜色</p>
		</div>
	</body>
</html>